<template>
  <div class="table">
    <div class="container">
      <div class="header-box">
        <el-button type="primary"  @click="delNumber" size="mini">删除分支</el-button>
        <el-input v-model="select_word"  placeholder="通过分支筛选" class="select_input" size="mini"></el-input>
        <el-button type="primary" @click="flag = true"  size="mini">添加分支</el-button>
      </div>
      <div class="main">
      <el-table :data="data3" size="mini" border style="width: 100%" height="520px" @selection-change="handleSelectionChange">
           <el-table-column type="selection" ></el-table-column>
           <el-table-column label="分支" width="500" align="center" prop="studentID"></el-table-column>
        <el-table-column label="收入" width="350" align="center" prop="Name"></el-table-column>
        <el-table-column label="支出" width="430" align="center" prop="studentID"></el-table-column>
      </el-table>
      <el-pagination
      background
        :current-page="currentpage"
        @current-change="handleCurrentChange"
        :total="data.length"
        :page-size= "pagesize"
        layout="total,prev, pager, next">
      </el-pagination>
      </div>
    </div>
    <el-dialog title="添加用户" :visible.sync="flag" width="400px" center>
      <el-form :model="form" status-icon   label-width="70px" >
         <el-form-item label="分支:" prop="username" size="mini" label-width="100px">
          <el-input v-model="form.Name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="收入:" prop="username" size="mini" label-width="100px">
          <el-input v-model="form.Name2" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="支出" prop="password" size="mini" label-width="100px">
          <el-input  placeholder="请输入学号" v-model="form.studentID"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="flag = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="addpeople">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Http from '../../utils/http'
export default {
  Name: 'XiaoYuan',
  mounted () {
    this.getDate()
  },
  data () {
    return {
      pagesize: 10,
      checked: '',
      form: {
        Name: '',
        studentID: '',
        dormitoryNumber: '',
        aclass: '',
        ato: '',
        leaveTime: ''
      },
      select_word: '',
      data: [
      ],
      data2: [
      ],
      flag: false,
      currentpage: '1'
    }
  },
  computed: {
    data3 () {
      return this.data.slice((this.currentpage - 1) * this.pagesize, this.currentpage * this.pagesize)
    }
  },
  watch: {
    select_word: function () {
      if (this.select_word === '') {
        this.data = this.data2
      } else {
        this.data = []
        for (let item of this.data2) {
          console.log(typeof item.Name)
          if (!item.Name.indexOf(this.select_word)) {
            this.data.push(item)
          }
        }
      }
    }
  },
  methods: {
    handleSelectionChange: function (val) {
      this.checked = val
    },
    handleCurrentChange (val) {
      this.currentpage = val
    },
    addNumber: function () {
    },
    delNumber: function () {
      let that = this
      console.log('this.index', this.checked)
      for (let i of this.checked) {
        Http({'studentID': i.studentID}, '/api/deletepeople').then(function (res) {
          that.getDate()
          console.log(res)
        })
        console.log('student', i.studentID)
      }
    },
    getDate: function () {
      let that = this
      Http({}, '/api/table').then(function (res) {
        that.data = res.data
        that.data2 = res.data
      })
      this.select_word = ''
    },
    addpeople () {
      let that = this
      Http(that.form, '/api/addpeople').then(function (res) {
        that.getDate()
        console.log(res)
        that.flag = false
      })
    }
  }
}
</script>

<style scoped>
*{
  padding: 0px;
  margin: 0px;
  line-height: 20px;
}
.select_input{
  display: inline-block;
  width: 200px;
}
.container{
  background-color: white;
  padding: 10px;
}
.main{
  padding: 20px 0px 0px 0px ;
}
</style>
